<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field="name">类型名称</th>
							<!-- 							<th class="text-center" data-field="status">状态</th> -->
							<th class="text-center" data-field="id">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script>
	function actionFormatter(value, row, index) {
		var edit = "<button class='btn btn-primary btn-xs glyphicon glyphicon-pencil' onclick='showModal(\""
				+ row.id + "\");'>编辑</button>";
		var del = "<button class='btn btn-danger btn-xs glyphicon glyphicon-trash' onclick='del(\""
				+ row.id + "\");'>删除</button>";
		// 		var frozen = "<button class='btn btn-warning btn-xs glyphicon glyphicon-chevron-down' onclick='frozen(\""
		// 				+ row.id + "\");'>冻结</button>";
		// 		var unFrozen = "<button class='btn btn-success btn-xs glyphicon glyphicon-chevron-up' onclick='unFrozen(\""
		// 				+ row.id + "\");'>解冻</button>";
		// 		if (row.state == 1) {
		// 			return edit + "&nbsp;" + frozen + "&nbsp;" + del;
		// 		} else if (row.state == 2) {
		// 			return edit + "&nbsp;" + unFrozen + "&nbsp;" + del;
		// 		}
		return edit + "&nbsp;" + del;
	}

	var table_dataset = [ {
		field : 'name',
		align : 'center',
	}, {
		align : 'center',
		width : 300,
		formatter : actionFormatter,
	} ];

	$('#table')
			.bootstrapTable(
					{
						url : "${pageContext.request.contextPath}/selectPropertyServiceTypes",
						idField : "id",
						columns : table_dataset,
						striped : true, //是否显示行间隔色
						pagination : true, //是否显示分页
						pageSize : 10, //每页的记录行数
						pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
						search : false, //是否显示搜索
						showRefresh : true,
						sidePagination : "server", //表示服务端请求  
						queryParamsType : "limit",
						queryParams : function queryParams(params) { //设置查询参数  
							var param = {
								offset : params.offset,
								limit : params.limit
							};
							return param;
						},
						toolbar : "<button class='btn btn-primary glyphicon glyphicon-plus' onclick='showModal(\""
								+ '' + "\");'>新增数据</button>",
						// 						+"&nbsp;<button class='btn btn-danger glyphicon glyphicon-trash'>批量删除</button>",
						icons : {
							paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
							paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
							refresh : 'glyphicon-refresh icon-refresh',
							toggle : 'glyphicon-list-alt icon-list-alt',
							columns : 'glyphicon-th icon-th',
							detailOpen : 'glyphicon-plus icon-plus',
							detailClose : 'glyphicon-minus icon-minus',
							"export" : 'glyphicon-export icon-share'
						},
						showExport : true,
						exportDataType : 'basic',
						exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql',
								'excel' ],
					});

	//弹窗
	function showModal(id) {
		layer
				.open({
					type : 2,
					area : [ '400px', '197px' ],
					fix : false, //不固定
					maxmin : true,
					shade : 0.4,
					offset : [ 150 ],
					title : '编辑',
					content : '${pageContext.request.contextPath}/jump_service_type_edit?id='
							+ id,
					btn : [ "保存" ],
					btn1 : function(index, layero) {
						var iframeWin = window[layero.find('iframe')[0]['name']];
						iframeWin.insert();//执行子页面的方法
					}
				});
	}

	function del(id) {
		layer
				.confirm(
						"是否删除此项？",
						function(index) {
							$
									.ajax({
										url : "${pageContext.request.contextPath}/updatePropertyServiceType",
										type : "post",
										data : {
											id : id,
											state : '-1'
										},
										dataType : "json",
										success : function(data) {
											if (data.result === 1) {
												layer.msg('操作成功!', {
													icon : 1,
													time : 800
												});
												setTimeout(function() {
													$("#table").bootstrapTable(
															'refresh');
												}, 500);
											} else {
												layer.msg('操作失败!', {
													icon : 2,
													time : 800
												});
											}
										},
										error : function() {
											layer.msg('系统繁忙，请稍后再试!', {
												icon : 5,
												time : 800
											});
										}
									});
						});
	}

	function frozen(id) {
		layer
				.confirm(
						"是否冻结？",
						function(index) {
							$
									.ajax({
										url : "${pageContext.request.contextPath}/updatePropertyServiceType",
										type : "post",
										data : {
											id : id,
											status : '0'
										},
										dataType : "json",
										success : function(data) {
											if (data.result === 1) {
												layer.msg('操作成功!', {
													icon : 1,
													time : 800
												});
												setTimeout(function() {
													$("#table").bootstrapTable(
															'refresh');
												}, 500);
											} else {
												layer.msg('操作失败!', {
													icon : 2,
													time : 800
												});
											}
										},
										error : function() {
											layer.msg('系统繁忙，请稍后再试!', {
												icon : 5,
												time : 800
											});
										}
									});
						});
	}

	function unFrozen(id) {
		layer
				.confirm(
						"是否解冻？",
						function(index) {
							$
									.ajax({
										url : "${pageContext.request.contextPath}/updatePropertyServiceType",
										type : "post",
										data : {
											id : id,
											state : '1'
										},
										dataType : "json",
										success : function(data) {
											if (data.result === 1) {
												layer.msg('操作成功!', {
													icon : 1,
													time : 800
												});
												setTimeout(function() {
													$("#table").bootstrapTable(
															'refresh');
												}, 500);
											} else {
												layer.msg('操作失败!', {
													icon : 2,
													time : 800
												});
											}
										},
										error : function() {
											layer.msg('系统繁忙，请稍后再试!', {
												icon : 5,
												time : 800
											});
										}
									});
						});
	}

	function query() {
		$("#table").bootstrapTable('refresh');
	}
</script>
</html>
